<template>
    <div class="user_container">
        <div class="user_header_container">
            <div class="user_header_tital">个人详情</div>
            <el-button plain size="small" style="margin-right: 15px;" @click="goBackPage">返回</el-button>
        </div>
        <el-divider></el-divider>
        <div class="user_body_container">
            <div class="user_info_container1">
                <div class="user_info_container1_left_container">
                    <div class="user_info_container1_left_first">
                        <div style="font-size:x-large;font-weight: 700;">{{ this.Name }}</div>
                        <div style="font-size: small;margin-left: 5px;">ID:{{ this.Id }}</div>
                    </div>
                    <div class="user_info_container1_left_second">
                        <el-tag type="info" class="tag">Vue</el-tag>
                        <el-tag type="info" class="tag">SpringBoot</el-tag>
                        <el-tag type="info" class="tag">javaScript</el-tag>
                        <el-tag type="info" class="tag">java</el-tag>
                    </div>
                    <div class="user_info_container1_left_third">
                        <p>男，{{ this.Age }}岁，毕业于合肥工业大学，博士研究生，瑞典乌普萨拉大学全球能源系统所访问学者，
                            研究领域为能源经济管理、资源环境政策与管理，博士指导管理科学与工程专业，硕士指导
                            管理科学与工程、应用经济学专业。</p>
                    </div>
                    <!-- <div class="user_info_container1_left_fouth">
                        <i class="el-icon-paperclip" style="font-size: x-large;"></i>
                        <div style="color: #409EFF;">唐旭</div>
                        <div style="color: gray;">发布在</div>
                        <div style="color: #409EFF;">design.车辆管理.com</div>
                        <div style="margin-left: 10px;color: gray;">2024-01-01 18:00</div>
                    </div> -->
                </div>
                <div class="user_info_container1_right_container">
                    <div class="image_container"></div>
                </div>
            </div>
            <el-divider></el-divider>
            <div class="user_info_container2">
                <div class="user_info_container2_left_container">
                    <el-descriptions class="margin-top" direction="vertical" :column="1">
                        <el-descriptions-item label="电话号码" labelStyle="font-weight: 700;">{{ this.Phone
                        }}</el-descriptions-item>
                    </el-descriptions>
                </div>
                <div class="user_info_container2_right_container">
                    <el-descriptions class="margin-top" direction="vertical" :column="3" style="width: 50%;">
                        <el-descriptions-item label="部门" contentStyle="font-weight: 700;">{{ this.Department
                        }}</el-descriptions-item>
                        <el-descriptions-item label="职位" contentStyle="font-weight: 700;">{{ this.Position
                        }}</el-descriptions-item>
                        <el-descriptions-item label="状态"><el-tag size="small">在职</el-tag></el-descriptions-item>
                    </el-descriptions>
                </div>
                <el-button @click="handleClick(scope.row)" type="text" size="small">编辑 | 更多</el-button>
            </div>
            <el-divider></el-divider>
            <div class="user_info_container3">
                <div class="user_info_container3_left_container">
                    <el-descriptions class="margin-top" direction="vertical" :column="4">
                        <el-descriptions-item label="毕业院校" labelStyle="font-weight: 700;">合肥工业大学</el-descriptions-item>
                        <el-descriptions-item label="学历" labelStyle="font-weight: 700;">博士研究生</el-descriptions-item>
                        <el-descriptions-item label="项目数量" labelStyle="font-weight: 700;">6</el-descriptions-item>
                        <el-descriptions-item label="参与项目数量" labelStyle="font-weight: 700;">17</el-descriptions-item>
                    </el-descriptions>
                </div>
                <div class="user_info_container3_right_container">
                    <el-descriptions class="margin-top" direction="vertical" :column="1" style="width:20%;">
                        <el-descriptions-item label="访问量">645</el-descriptions-item>
                    </el-descriptions>
                    <div class="demo-image">
                        <el-image style="width: 180px; height: 45px;" :src="require('@/assets/访问量展示.png')" :fit="cover">
                        </el-image>
                    </div>
                </div>
            </div>
            <el-divider></el-divider>
            <div class="user_info_container4">
                <div class="user_info_container4_left_container">
                    <el-descriptions class="margin-top" :column="4" direction="vertical">
                        <el-descriptions-item label="身份证号" :span="2" labelStyle="font-weight: 700;">{{ this.IdNumber
                        }}</el-descriptions-item>
                        <el-descriptions-item label="年龄" labelStyle="font-weight: 700;">{{ this.Age
                        }}</el-descriptions-item>
                        <el-descriptions-item label="户籍地" labelStyle="font-weight: 700;">安徽省合肥市</el-descriptions-item>
                    </el-descriptions>
                </div>
                <div class="user_info_container4_right_container">
                    <el-steps :active="2" simple style="width: 60%;background-color: rgba(255,255,255,0);">
                        <el-step title="入职" icon="el-icon-edit"></el-step>
                        <el-step title="综合办" icon="el-icon-upload"></el-step>
                        <el-step title="..." icon="el-icon-picture"></el-step>
                    </el-steps>
                </div>
            </div>
            <el-divider></el-divider>
            <div class="user_info_container5">
                <div class="user_info_container5_left_container">
                    <i class="el-icon-s-data" style="font-size: xx-large;"></i>
                    <el-descriptions class="margin-top" :column="1" direction="vertical" style="width: 50%;">
                        <el-descriptions-item label="统计数据"
                            labelStyle="font-weight:700;">截止日期：2024/01/26</el-descriptions-item>
                    </el-descriptions>
                </div>
                <div class="user_info_container5_right_container">
                    <el-descriptions class="margin-top" :column="2" direction="vertical" style="width: 40%;">
                        <el-descriptions-item label="用车次数">15</el-descriptions-item>
                        <el-descriptions-item label="维修次数">1</el-descriptions-item>
                    </el-descriptions>
                </div>
            </div>
            <el-divider></el-divider>
            <div class="user_info_container6">
                <div>个人信息</div>
                <div>2024-01-26 12:00</div>
            </div>
            <el-divider></el-divider>
        </div>
    </div>
</template>

<style scoped>
.user_container {
    margin: 0 auto;
    width: 95%;
    margin-top: 1%;
    height: 95%;
    justify-content: center;
    background-color: rgb(255, 255, 255);
}

.user_header_container {
    height: 7%;
    padding-top: 5px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.user_body_container {
    margin: 0 auto;
    height: 93%;
    width: 90%;
}

.user_header_tital {
    margin-left: 25px;
    color: #409EFF;
    font-size: x-large;
    width: 10%;
}

.user_info_container1 {
    height: 28%;
    display: flex;
}

.user_info_container1_left_container {
    width: 70%;
}

.user_info_container1_left_first {
    display: flex;
    align-items: flex-end;
    justify-content: left;
    height: 25%;
}

.user_info_container1_left_second {
    display: flex;
    align-items: center;
    justify-content: left;
    height: 15%;
}

.user_info_container1_left_third {
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: left;
    height: 60%;
}

.user_info_container1_left_fouth {
    display: flex;
    height: 10%;

}

.user_info_container1_right_container {
    display: flex;
    width: 30%;
    justify-content: center;
}

.image_container {
    height: 100%;
    width: 70%;
    background: url(../../assets/唐旭.jpg) no-repeat #ffffff;
    background-size: contain;
    background-position: center;
}

.user_info_container2 {
    height: 10%;
    display: flex;
}

.user_info_container2_left_container {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: left;
}

.user_info_container2_right_container {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: right;
}

.user_info_container3 {
    height: 10%;
    display: flex;
}

.user_info_container3_left_container {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: left;
}

.user_info_container3_right_container {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: right;
}

.user_info_container4 {
    height: 10%;
    display: flex;
}

.user_info_container4_left_container {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: left;
}

.user_info_container4_right_container {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: right;
}

.user_info_container5 {
    height: 10%;
    display: flex;
}

.user_info_container5_left_container {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: left;
}

.user_info_container5_right_container {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: right;
}

.user_info_container6 {
    height: 10%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.el-divider--horizontal {
    margin: 5px auto;
    height: 1px;
    width: 100%;
}

.tag {
    height: 60%;
    width: 10%;
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
<style>
.el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
    padding-bottom: 0;
}
</style>

<script>
export default {
    name: 'UserDetailView',
    data() {
        return {
            Name: null,
            Id: null,
            Phone: null,
            IdNumber: null,
            Age: null,
            Department: null,
            Position: null,
        }
    },
    computed: {

    },
    methods: {
        initUserDetail() {
            this.Name = this.$route.query.Name;
            this.Id = this.$route.query.Id;
            this.Phone = this.$route.query.Phone;
            this.IdNumber = this.$route.query.IdNumber;
            this.Age = this.$route.query.Age;
            this.Department = this.$route.query.Department;
            this.Position = this.$route.query.Position;
        },
        goBackPage() {
            this.$router.go(-1)
        },
    },
    mounted() {
        this.initUserDetail();
    }
}
</script>
  